<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
    <meta name="format-detection" content="telephone=no" />
    <title>测试my.js的核心方法</title>
    <script src="my.js"></script>
    <style>
    em {
        display: block;
        color: red;
        font-style: normal;
    }
    .clickme {
        background-color: #eee;
        cursor: pointer;
        border: 1px solid red;
    }
    </style>
</head>
<body>
    <script>
    function log() {
        var args = arguments;
        var str = '';

        for (var i = 0; i < args.length; i++) {
            str += args[i].toString();
            if (i < args.length - 1) {
                str += ', ';
            }
        }
        str += '<br>';

        document.write(str);
    }
    </script>
    <h1>测试my.js的核心方法</h1>


    <h2>DOM无关方法</h2>

    <h3>isArray(arr)</h3>
    <script>
    log('my.isArray([])' + my.isArray([]));
    log('my.isArray({length: 0}) = ' + my.isArray({length: 0}));
    </script>
    <h3>w, h</h3>
    <script>
    log('my.w = ' + my.w);
    log('my.h = ' + my.h);
    </script>
    <h3>to(url)</h3>
    <script>
    log('my.to');
    </script>
    <p>点<span class="clickme" onclick="my.to('http://www.ayqy.net/')">这里</span>跳转至http://www.ayqy.net/</p>


    <h2>DOM相关方法</h2>

    <h3 id="ele_my">m$(func)</h3>
    <script>
    log('m$(function() {alert(\'dom ready\');})' + m$(function() {console.log('dom ready');}));
    </script>
    <h3 id="ele_my">m$(selector)</h3>
    <em>参数里面不能含有$，否则querySelector报错</em>
    <script>
    log('m$(\'#ele_my\') return ' + m$('#ele_my'));
    console.log(m$('#ele_my'));
    </script>

    <h3>m$$(selector)</h3>
    <em>参数里面不能含有$，否则querySelector报错</em>
    <script>
    log('m$$(\'h3\') return ' + m$$('h3'));
    console.log(m$$('h3'));
    </script>

    <h3 id="ele_get">node或者get()</h3>
    <script>
    log('m$(\'#ele_get\').node return ' + m$('#ele_get').node);
    console.log(m$('#ele_get').node);
    log('m$(\'#ele_get\').get() return ' + m$('#ele_get').get());
    console.log(m$('#ele_get').get());
    </script>

    <h3 id="ele_on" class="clickme">on</h3>
    <script>
    function alertTxt(e) {
        alert(e.target.innerHTML);
    }
    m$('#ele_on').on(alertTxt);
    </script>
    <p>点击上面的on，会alert显示e.target.innerHTML</p>
    <h3 id="ele_off" class="clickme">off</h3>
    <script>
    m$('#ele_off').on(function() {
        m$('#ele_on').off(alertTxt);
    });
    </script>
    <p>点击上面的off，会让前面的on的alert失效</p>

    <h3 id="ele_attr" name="attr_name">attr()</h3>
    <script>
    log('m$(\'#ele_attr\').attr(\'name\') return ' + m$('#ele_attr').attr('name'));
    </script>
    <h3 id="ele_attr2" name="attr_name">attr(key, value)</h3>
    <script>
    m$('#ele_attr2').attr('name', 'new_attr_value');
    log('m$(\'#ele_attr2\').attr(\'name\', \'new_attr_value\') result ' + m$('#ele_attr2').attr('name'));
    </script>

    <h3 id="ele_addClass">addClass(className)</h3>
    <script>
    log('m$(\'#ele_addClass\').addClass(\'clickme\');');
    m$('#ele_addClass').addClass('clickme');
    m$('#ele_addClass').addClass('kickme');
    </script>
    <h3>rmClass(className)</h3>
    <p id="ele_rmClass1" class="clickme">只有一个class</p>
    <p id="ele_rmClass2" class="a clickme b c">有多个class，目标在中间</p>
    <p id="ele_rmClass3" class="a b c clickme">有多个class，目标在中间</p>
    <script>
    log('m$(\'#ele_rmClass1\').rmClass(\'clickme\');');
    m$('#ele_rmClass1').rmClass('clickme');
    log('m$(\'#ele_rmClass2\').rmClass(\'clickme\');');
    m$('#ele_rmClass2').rmClass('clickme');
    log('m$(\'#ele_rmClass3\').rmClass(\'clickme\');');
    m$('#ele_rmClass3').rmClass('clickme');
    </script>
    <h3>hasClass(className)</h3>
    <p id="ele_hasClass1" class="a b clickme c ">有目标class</p>
    <p id="ele_hasClass2">没有目标class</p>
    <script>
    log('m$(\'#ele_hasClass1\').hasClass(\'clickme\'); return ' + m$('#ele_hasClass1').hasClass('clickme'));
    log('m$(\'#ele_hasClass2\').hasClass(\'clickme\'); return ' + m$('#ele_hasClass2').hasClass('clickme'));
    </script>
    <h3 id="ele_tgClass">tgClass(className)</h3>
    <script>
    function tgClass() {
        m$('#ele_tgClass').tgClass('clickme');
    }
    </script>
    <p>点击<span class="clickme" onclick="tgClass();">这里</span>的切换tgClass的样式</p>

    <h3 id="ele_css" style="color: #000;">css(key)</h3>
    <script>
    log('m$(\'#ele_css\').css(\'color\'); return ' + m$('#ele_css').css('color'));
    </script>
    <h3 id="ele_css2" style="color: #000;">css(key, value)</h3>
    <script>
    m$('#ele_css2').css('color', '#ddd');
    log('m$(\'#ele_css2\').css(\'color\'); result ' + m$('#ele_css2').css('color'));
    </script>
    <h3 id="ele_scale" style="color: #000;">scale(scaleValue, [x], [y], [z])</h3>
    <h4>x, y, z可选默认为0</h4>
    <script>
    m$('#ele_scale').scale(1.5);
    log('m$(\'#ele_scale\').scale(1.5); result as above');
    </script>
    <h3 id="ele_rotate" style="color: #000;">rotate(deg, [x], [y], [z])</h3>
    <h4>deg是以deg结尾的string，如'15deg'</h4>
    <h4>x, y, z可选默认为0</h4>
    <script>
    m$('#ele_rotate').rotate('15deg');
    log('m$(\'#ele_rotate\').rotate(\'15deg\'); result as above');
    </script>

    <h3>left(tagOrClass)</h3>
    <p><span><a>A</a><span class="another_span">another SPAN</span><span>SPAN</span><a id="ele_left">A#ele_left</a></span></p>
    <script>
    log('m$(\'#ele_left\').left(\'a\').innerHTML return ' + m$('#ele_left').left('a').innerHTML);
    log('m$(\'#ele_left\').left(\'.another_span\').innerHTML return ' + m$('#ele_left').left('.another_span').innerHTML);
    </script>
    <h3>right(tagOrClass)</h3>
    <p><span><a id="ele_right">A#ele_right</a><span class="another_span">another SPAN</span><a>A</a><span>SPAN</span></span></p>
    <script>
    log('m$(\'#ele_right\').right(\'span\').innerHTML return ' + m$('#ele_right').right('span').innerHTML);
    log('m$(\'#ele_right\').right(\'.another_span\').innerHTML return ' + m$('#ele_right').right('.another_span').innerHTML);
    </script>
    <h3>leftest(tagOrClass)</h3>
    <p><span><a>another A</a><a>A</a><span>SPAN</span><span class="another_span">another SPAN</span><a id="ele_leftest">A#ele_leftest</a></span></p>
    <script>
    log('m$(\'#ele_leftest\').leftest(\'a\').innerHTML return ' + m$('#ele_leftest').leftest('a').innerHTML);
    log('m$(\'#ele_leftest\').leftest(\'.another_span\').innerHTML return ' + m$('#ele_leftest').leftest('.another_span').innerHTML);
    </script>
    <h3>rightest(tagOrClass)</h3>
    <p><span><a id="ele_rightest">A#ele_rightest</a><span class="another_span">another SPAN</span><a>A</a><span>SPAN</span></span></p>
    <script>
    log('m$(\'#ele_rightest\').rightest(\'span\').innerHTML return ' + m$('#ele_rightest').rightest('a').innerHTML);
    log('m$(\'#ele_rightest\').rightest(\'.another_span\').innerHTML return ' + m$('#ele_rightest').rightest('.another_span').innerHTML);
    </script>

    <h3>show()/hide()</h3>
    <h4>不测了，用法和jq一样</h4>

</body>
</html>